
	function Canvas(canvas){
		if((typeof canvas)=='string'){
			canvas = document.getElementById(canvas);
		}
		this.context = canvas.getContext('2d');
	}
	
	Canvas.prototype.setAttrs = function(attrs){
		var aMap = {'fill-color':'fillStyle', 'stroke-color':'strokeStyle', 'stroke-width':'lineWidth', 'fill-opacity':'globalAlpha'};
		for(name in attrs){
			var cvName = aMap[name];
			this.context[cvName] = attrs[name];
		}
		if(attrs['stroke-dash']){
			this.setLineDash([this.context.lineWidth*2]);
		}
	}
	
	Canvas.prototype.drawPath = function(pathStr){
		var oThis = this;
		pathStr = 'M146,123L560,115L362,362L169,311Z';
		var regExp = /([A-Z])([^A-Z]*)/gim;
		var actions = pathStr.split(regExp);
		var r, cm, params;
		var xStart=-1, yStart=1, xFrom=0, yFrom=0;
		
		while(r=regExp.exec(pathStr)){
			cmd = r[1];
			params = r[2];
			if(cmd=='M'){
				var na = params.split(',');
				moveTo(na[0], na[1]);
			}else if(cmd=='L'){
				var na = params.split(',');
				lineTo(na[0], na[1]);
			}else if(cmd=='Z'){
				lineTo(xStart, yStart);
			}
		}
		
		function moveTo(x, y){
			if(xFrom != x||yFrom != y){
				xStart = -1;
				yStart = -1;
			}
			xFrom = x;
			yFrom = y;
			this.context.moveTo(x, y);
		}
		
		function lineTo(x, y){
			oThis.drawLine(xFrom, yFrom, x, y);
			if(xStart==-1){
				xStart = xFrom;
			}
			if(yStart==-1){
				yStart = yFrom;
			}
			xFrom = x;
			yFrom = y;
		}
	}
	
	Canvas.prototype.drawPath = function(pathStr, fillColor){
		//pathStr = 'M146,123L560,115L362,362L169,311Z';
		var regExp = /([A-Z])([^A-Z]*)/gim;

		this.context.beginPath();
		var r, cm, params;
		this.context.strokeStyle = '#000';
		this.context.setLineDash([1,1,2,1,3,1,4,1,5,1,6,1,7,1,8,1,9,1,50]);
		while(r=regExp.exec(pathStr)){
			cmd = r[1];
			params = r[2];
			var na = params.split(',');
			if(cmd=='M'){
				this.context.moveTo(na[0], na[1]);
			}else if(cmd=='L'){
				this.context.lineTo(na[0], na[1]);
			}else if(cmd=='S'){
				this.context.quadraticCurveTo(na[0],na[1],na[2],na[3]);
			}else if(cmd=='C'){
				this.context.bezierCurveTo(na[0],na[1],na[2],na[3],na[4],na[5]);
			}else if(cmd=='A'){
				this.context.arc(na[0],na[1],na[2],na[3],na[4],na[5]);
			}else if(cmd=='Z'){
				this.context.closePath();
			}
		}
		this.context.stroke();
	}
	
	Canvas.prototype.setLineDash = function (dashList) {
		this.context.setLineDash(dashList);
	}
	
	Canvas.prototype.drawRect = function(x, y, width, height){
      this.context.strokeRect(x, y, width, height);
	}
	
	Canvas.prototype.drawRoundRect = function (x, y, w, h, r) {
		if (w < 2 * r) r = w / 2; 
		if (h < 2 * r) r = h / 2; 
		this.context.beginPath();
		this.context.moveTo(x+r, y);
		this.context.arcTo(x+w, y, x+w, y+h, r);
		this.context.arcTo(x+w, y+h, x, y+h, r);
		this.context.arcTo(x, y+h, x, y, r);
		this.context.arcTo(x, y, x+w, y, r);
		this.context.closePath();
		this.context.stroke();
	}

	Canvas.prototype.drawLine = function(x1, y1, x2, y2){
      this.context.beginPath();
      this.context.moveTo(x1, y1);
      this.context.lineTo(x2, y2);
      this.context.stroke();
	}
				
	Canvas.prototype.drawText = function(x, y, str, font){
		this.context.font = font||'italic 20pt Calibri';
		this.context.fillText(str, x, y);
	}
			
	Canvas.prototype.drawImgage = function(x, y, img){
		this.context.drawImage(img, x, y);
	}
	
	Canvas.prototype.fill = function () {
		 this.context.fill();
	}
	
	Canvas.prototype.clear = function(){
		this.context.clearRect(0, 0, 9999, 9999);
	}
	